<template>
  <van-empty description="您的购物车里空空如也~" v-if="cartlist.length == 0" />
  <div v-else>
    <van-swipe-cell v-for="(item, index) in cartlist" :key="index">
      <van-row justify="center">
        <van-col span="3">
          <van-checkbox style="margin-top: 25px;margin-left: 12px" v-model="item.flag"
            @click="isSelectone(item.cartid, item.flag)"></van-checkbox>
        </van-col>
        <van-col span="21">
          <van-card :price="item.originprice" desc="描述信息" :title="item.proname" class="goods-card" :thumb="item.img1">
            <template #num>
              <van-stepper v-model="item.num" theme="round" button-size="22" disable-input
                @change="toUpdateNum(item.cartid, item.num)" />
            </template>
          </van-card>

        </van-col>

      </van-row>
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" @click="removecl(item.cartid)" />
      </template>
    </van-swipe-cell>
  </div>
  <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '20px 0' }">猜你喜欢</van-divider>


  <div class="cartfooter">
    <van-submit-bar :price="totalprice" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="totalflag">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
      </template>
    </van-submit-bar>
  </div>

</template>

<script>
import { lookCartlist, removeCartlist, updateSelectAll, updateSelectone, updateNum } from '@/apis/cart';
export default {
  data() {
    return {
      cartlist: [],
      value: 1,
      // flag: false
    }
  },
  created() {
    this.getcartFn()
  },
  methods: {
    removecl(id) {
      removeCartlist({ cartid: id }).then(res => {
        console.log(res);
        this.getcartFn()
      })
    },
    getcartFn() {
      lookCartlist({ userid: localStorage.getItem("userid") }).then(res => {
        this.cartlist = res.data.data || []
        console.log(this.cartlist);
      })
    },
    isSelectone(cartid, flag) {
      updateSelectone({ cartid: cartid, flag: flag }).then(res => {
        console.log(res);

      })
    },
    onSubmit() {
    },
    toUpdateNum(id, nums) {
      updateNum({ cartid: id, num: nums }).then(res => {
        console.log(res);
      })
    }
  },
  computed: {
    totalflag: {
      get() {
        return this.cartlist.every((item) => {
          return item.flag == true
        })
      },
      set(value) {
        console.log(value);

        updateSelectAll({ userid: localStorage.getItem("userid"), type: value }).then(res => {
          console.log(res);
          this.getcartFn()
        })
      }
    },
    totalprice() {
      return this.cartlist.reduce((sum, item, index) => {
        if (item.flag == true) {
          return sum += item.originprice * item.num * 100
        } else {
          return sum
        }
      }, 0)
    }
  }
}
</script>

<style lang="less" scoped>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}

.cartfooter {
  // position: fixed;
  // z-index: 99;
  // bottom: 44px;
  // height: 30px;
  // background-color: white;

  // background-color: rgba(red, green, blue, 0.5);
  :deep(.van-submit-bar) {
    position: fixed;
    bottom: 44px;
    left: 0;
    opacity: 0.9;
  }
}
</style>